<template>
  <div class="answer-list table-theme">
    <head-title title="审核--货期回答"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <select-view
            :option-list="statusList"
            :value="form.status"
            placeholder="状态"
            type="status"
            @value="setSelectValue"
          >
          </select-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总用户数：{{ total }}</p>
      <el-table :data="list">
        <el-table-column
          label="序号"
          align="center"
          prop="ask_answer_id"
          width="50"
        ></el-table-column>
        <el-table-column
          label="用户ID"
          align="center"
          prop="user.user_id"
          width="100"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="100">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.user.heard_img"
              style="width: 50px; height: 50px; vertical-align: top"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="商品ID"
          align="center"
          prop="goods_id"
          width="100"
        ></el-table-column>
        <el-table-column label="商品图" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.goods[0].image_middle"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="订单ID"
          align="center"
          prop="order_id"
        ></el-table-column>
        <el-table-column
          label="回答内容"
          align="center"
          prop="content"
        ></el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            {{scope.row.type == 1 ?'正常':'异常'}}
          </template>
        </el-table-column>
        <el-table-column
          label="原定时间"
          align="center"
          prop="delivery_time"
        ></el-table-column>
        <el-table-column
          label="延迟时间"
          align="center"
          prop="plan_time"
        ></el-table-column>
        <el-table-column label="上下架" align="center" v-if="form.status != 3">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="onUpGoodsAsk(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="回答时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="280">
          <template slot-scope="scope">
              <el-button
              type="primary"
              @click="onOpenAnswerDialog(scope.row)"
              size="mini"
              >编辑</el-button
            >
            <el-button type="primary" @click="onAudit(scope.row,1)" size="mini" v-if="scope.row.status == 3">
                审核
            </el-button>
            <el-button type="danger" size="mini" @click="onAudit(scope.row,2)" v-if="scope.row.status == 3">拒绝</el-button>
            <el-button
              type="danger"
              @click="onDel(scope.row.ask_answer_id)"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="form.page + 1"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="编辑"
      :visible.sync="answerDialog"
      center
      :modal-append-to-body="false"
      width="680px"
      @close="onClose"
    >
      <el-form
        :model="answerForm"
        :rules="answerFormRules"
        ref="answerForm"
        label-width="120px"
      >
        <el-form-item label="类型:" prop="type">
          <el-radio v-model="answerForm.type" :label="1">正常</el-radio>
          <el-radio v-model="answerForm.type" :label="2">异常</el-radio>
        </el-form-item>
        <el-form-item label="内容:" prop="content">
          <el-input
            type="textarea"
            v-model.trim="answerForm.content"
            :rows="3"
            placeholder="请输入回复内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="原定时间" v-if="answerForm.type == 2">
          <p>{{ answerForm.delivery_time }}</p>
        </el-form-item>
        <el-form-item label="延迟时间" v-if="answerForm.type == 2">
          <el-date-picker
            v-model="answerForm.plan_time"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="confirmClick('answerForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import SelectView from "@/components/SelectView";
export default {
  components: {
    ImgPopover,
    SelectView
  },
  data() {
    return {
      form: {
        page: 0,
        limit: 10,
        status: 3,
      },
      statusList: [
        {
          label: "上架",
          value: 1,
        },
        {
          label: "下架",
          value: 2,
        },
        {
          label: "审核中",
          value: 3,
        },
      ],
      searchOption: [
        {
          value: 0,
          label: "用户ID",
        },
        {
          value: 1,
          label: "商品ID",
        },
        {
          value: 2,
          label: "序号",
        },
      ],
      classSelect: 0,
      selectContent: "",
      total: 0,
      list: [],
      answerDialog: false,
      answerForm: {
        ask_answer_id: "",
        content: "",
        type:"",
        delivery_time:"",
        plan_time:""
      },
      answerFormRules: {
        type: [{ required: true, message: "请选择类型" }],
        content: [{ required: true, message: "请输入内容" }],
      },
      is_submit:false
    };
  },
  methods: {
    init(e) {
      this.form.page = e ? e - 1 : 0;
      let data = {
        ...this.form,
      };
      if (this.classSelect == 0) {
        data.user_id = this.selectContent;
      } else if (this.classSelect == 1) {
        data.goods_id = this.selectContent;
      } else if (this.classSelect == 2) {
        data.ask_answer_id = this.selectContent;
      }
      this.$http(this.$ApiList.OrderGoodsAnswerList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.data;
      });
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    refreshPage() {
      this.selectContent = "";
      this.form.status = 3;
      this.init();
    },
    onUpGoodsAsk(row) {
      let data = {
        ask_answer_id: row.ask_answer_id,
        status: row.status,
      };
      this.$http(this.$ApiList.OrderGoodsAnswerDown, data).then((res) => {
        this.$message.success(res.datas);
        this.init(this.form.page + 1);
      });
    },
    onDel(ask_answer_id) {
      this.$confirm("此操作将永久删除该提问, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http(this.$ApiList.DelOrderGoodsAnswer, { ask_answer_id }).then((res) => {
          this.$message.success(res.datas);
          this.init(this.form.page + 1);
        });
      });
    },
    onOpenAnswerDialog(rwo) {
      this.answerDialog = true;
      this.answerForm.content = rwo.content;
      this.answerForm.ask_answer_id = rwo.ask_answer_id;
      this.answerForm.type = rwo.type;
      this.answerForm.delivery_time = rwo.delivery_time;
      this.answerForm.plan_time = rwo.plan_time;
    },
    confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.is_submit){
            return false;
          }
          let data = JSON.parse(JSON.stringify(this.answerForm));
          delete data.delivery_time
          if(data.type == 1){
              delete data.plan_time
          }else{
            if(!this.answerForm.plan_time){
              this.$message.error('请填写完整信息后提交');
              return false;
            }
          }
          this.is_submit = true
          this.$http(this.$ApiList.OrderGoodsAnswerUp, data).then((res) => {
            this.$message.success(res.datas);
            this.answerDialog = false;
            this.$refs[formName].resetFields();
            let timer = setTimeout(()=>{
              this.is_submit = false
            },1000)
            this.$once('hook:beforeDestroy',()=>{
              clearTimeout(timer)
            })
            console.log(111)
          });
        } else {
          this.$message.error("请填写完整信息后提交");
        }
      });
    },
    onAudit(row,type){
        let data = {
            ask_id:row.ask_id,
            ask_answer_id:row.ask_answer_id,
            status:type
        }
        this.$http(this.$ApiList.OrderGoodsAnswerCheck,data).then(res=>{
            this.init(this.page+1);
            this.$message.success(res.datas);
        })
    },
    onClose(){
      this.is_submit = false;
      this.answerDialog = false;
      this.$refs.answerForm.resetFields();
    },
    setSelectValue(obj){
      const { value,type } = obj
      switch (type) {
        case 'status':
            this.form.status = value
          break;
      
        default:
          break;
      }
      this.init()
    }
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.answer-list {
}
</style>